Hong ji Project
홈페이지의 목적
포토폴리오 사이트로
고객의 요구사항을 최대한 반영하고
사이트의 기본기능인
웹사이트 방문자에게 작품을 보여주고
사용자에게 쉬운 사용법을 제공.
사용한 api 언어
html5
Javascript
Jquery
Bootstrapk
php
프로젝트 참조
프로젝트 링크 : https://github.com/hongjinho/hongji_project
서비스 중인 링크 : http://hongjihyun.com/
동영상 링크 : https://youtu.be/IauysCw3vFQ
고객의 요구사항
고객의 요구사항
기능
1)페이지 기능을 스크롤로
구현
2)페이지 로딩을 최소화
디자인
1)화면 크기에 따른 홈페이지의
디자인들이 비슷해야함.
기능 구현
메인 페이지 구현
메인 페이지
일정 간격만큼 스크롤시
다음페이지를 불러오는 기능
게시물 클릭하여 게시물을 보는
페이지로 이동하는 기능
게시물의 db 구조는 게시물 id,
본문 , 제목 , 이미지들의 (또는
비디오의 링크)들로 구성되여
php에서 로딩하는 업을
수행하고 있습니다.
페이지로딩을 최소화
관련 소스 링크
https://github.com/ho ngjinho/hongji_projec t/blob/m
aster/source/js/paging_default_op.js
Window.onhashchange
$(window).ready
이벤트와 now_paging()함수 참조
구현 방법
아까 페이징은 스크롤
이벤트를 들어서 ajax 구현하였고
카테고리 구현은
해시 데이터(경로#id)써서 뒤로
가기, 새로 고침, 홈페이지 최초 방문
시 카테고리를 인식하여 ajax
데이터를 불러와서 결과물을
출력한다
해시 데이터를 페이지 태그처럼
사용하였습니다.
디자인 구현
화면 크기에 따른 홈페이지의 디자인
구현 방법
Css미디어 쿼리로
화면 크기 기준을 4개로
나누어서 각각 기준에
디자인을 보여줌
관련 소스 링크
https://github.com/ho ngjinho/hongji_p
roject/blob/master/ source/css/style_thi
s.css
1) Pc디자인은 css 미디
쿼리와 calc() 함수로
디자인을 구현
2) 모바일 페이지는 부트스
트랩으로 구현
디자인
관리자 모드
관리자 모드 구현
기능 설명.
로그인하면 관리자 ui
나옵니다.
업로드 게시물 수정을
할수있습니다.
업로드와 게시물 수정은
게시물의 고유 id 이용하여
업로 드 및 수정 작업이 진행
됩니다.
관리자 모드 사진
관리자 모드 게시물 수정 및 업로드 창 사진